<template>
  <div class="collect-page">
    <!--
      load事件绑定了onLoad方法，这个方法是专门用来加载数据的方法
        如果finished为true，不会调用这个方法
        如果loading为true，也不会自动调用这个犯法

        它会在数据没有铺满一屏时，自动调用
        当你往上拉快拉到底的时候，还会再次调用

      finished绑定的finished用来标记是否全部加载完毕
        如果为true代表全部加载完毕，如果为false代表还没有，还可以继续上拉加载

      v-model绑定的loading，是用来标记当前是否正在加载中
         为true代表正在加载，为false代表没有在加载
         如果为true代表正在加载，那么onLoad不会被调用，所以默认应该是false
          onload如果调用了，会自动把这个值改为true
          所以如果本次数据加载完了，记得要手动把loading改为false，不然会一直显示加载中
          总结：这个变量，默认给false，加载完本次数据要记得也给false

      大总结：
        加载数据写到onLoad里
        为了能正常加载数据，finished和loading默认都应该给false
        加载完数据，要记得把loading改为false，还得判断数据有没有全部加载完，如果全部加载完把finished也要为true
     -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="----我是有底线的----"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>
  </div>
</template>

<script>
export default {
  name: 'collect-page',
  data () {
    return {
      list: [],
      loading: false,
      finished: false
    }
  },
  methods: {
    onLoad () {
      console.log('onload被调用了', this.loading)
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        // 循环10次，加到list这个数组
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1)
        }

        // 加载状态结束
        this.loading = false

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true
        }
      }, 1000)
    }
  }
}
</script>

<style lang="less" scoped>
.collect-page {
  margin-bottom: 50px;
  margin-top: 44px;
}
</style>
